<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>充值订单</title>
		<link rel="stylesheet" type="text/css" href="../mobile/js/layer/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="./js/jquery-3.1.1.min.js"></script>
        <script src="../mobile/js/layer/layui.js"></script>
        <script src="./js/jquery-1.9.1.js"></script>
        <script src="./js/common.js"></script>
	</head>
	<body>
		
		<div class="main_bg">
			
			<div class="order_head">
					<b class="meunhead">
						<a href="javascript:void(0)" class="levelmeun active">
							<span>设备</span><i class="iconfont">&#xe601;</i>
						</a>
						<span class="twolevelmeun">设备列表</span>
					</b>
					<span class="refresh_btn countjilu"></span>
					<a href="devicelist.html"><button class="refresh_btn">刷新</button></a>
					
					<input type="text" class="seachtext" id="seachtext" placeholder="请输入关键字" />
					
					<button class="seachbtn">查找</button>
					
					<!-- <button class="iconfont export_btn">&#xe621; 导出设备</button> -->
					<button class="iconfont export_btn" onclick="downerweima()">&#xe621; 下载二维码</button>
					<span id="dailis"></span>
					<span id="erji_dailis"></span>
					<span id="queding"></span>
			</div>
			
			<div class="orderbox">
				<table width="100%" cellpadding="0" cellspacing="0" class="ordertable">
					<thead>
						<tr>
							<th><input type="checkbox" id="btn1" value="">全选</th>
							<th>ID</th>
							<th>设备号</th>
							<th>一级代理</th>
							<th>二级代理</th>
							<th>ProductKey</th>
							<th>DeviceSecret</th>
							<th>二维码</th>
							<th>日期</th>
							<!-- <th>操作</th> -->
						</tr>
					</thead>
					
					<tbody id="devices">
						
					</tbody>
				</table>
				
				
				<div id="page"></div>
			</div>
		</div>
		
<div class="suibian"><img class="imgs" src=""></div>

</body>
<style type="text/css">
	.suibian{
		position: fixed;
		top: 12%;
		left: 25%;
	}
	.imgs{
		display: block;
		width: 500px;
	}
</style>





<script>
	//判断全选、反选
	$("#btn1").click(function(){
		if ($(this).prop("checked")) {
			$("input[name='checkbox']").prop("checked",true);
		}else{
			$("input[name='checkbox']").prop("checked",false);
		}
	}) 
	
	
	//首先加载数据
	$(function(){
		
		var geturl=url+ "/admin/userlist/devicelists";
		$.ajax({
				type: 'get',
				async:false,
				dataType: "json",
				url: geturl,
				success: function (data) {
					// console.log(data);alert(data);
					var count = data.datas.length;
					var countdaili = data.daili.length;
					var daili = '';
					var device = '';
					for (var k=0; k<count; k++) {
						device +='<tr>';
						device +='<td><input type="checkbox" name="checkbox" value="'+data.datas[k]['device_id']+'"></td>';
						device +='<td>'+data.datas[k]['device_id']+'</td>';
						device +='<td>'+data.datas[k]['device_sn']+'</td>';
						device +='<td>'+data.datas[k]['agent1']+'</td>';
						device +='<td>'+data.datas[k]['agent2']+'</td>';
						device +='<td>'+data.datas[k]['ProductKey']+'</td>';
						device +='<td>'+data.datas[k]['DeviceSecret']+'</td>';
						device +='<td>';
						device +='<a href="javascript:void(0)">';
						device +='<img class="pics" width="50" height="50" src="'+data.datas[k]['QRcode']+'" alt="" />';
						device +='</a>';
						device +='</td>';
						device +='<td>'+data.datas[k]['addtime']+'</td>';
						// d +='<td>';
						// d +='<button class="iconfont or_icon">&#xe69f;<a>编辑</a></button>';
						// d +='</td>';
						device +='</tr>';
					}
					$('#devices').html(device);
					$('.countjilu').html('共'+data.count+'条记录');

						daili +='<select class="iconfont export_btn" id="agentone" onchange="updateagent()" style="height: 28px;">';
						daili +='<option value="0">&#xe621;一级代理</option>';
						for (var m=0; m<countdaili; m++) {
							daili +='<option value="'+data.daili[m]['id']+'">'+data.daili[m]['agent_name']+'</option>';
						}
						daili +='</select>';
						$('#dailis').html(daili);

					
					layui.use(['laypage', 'layer'], function(){
					var laypage = layui.laypage;
					  //自定义样式
					  laypage.render({
					    elem: 'page'
					    ,count:data.count
					    ,limit: data.limit
					    ,theme: '#35C4F9'
					  });
					});
					//判断全选、反选
					$("input[name='checkbox']").each(function(i){
						$(this).click(function(){
							if ($("input[name='checkbox']").eq(i).prop("checked") == false) {
								$("#btn1").prop('checked',false);
							}else{
								$("#btn1").prop('checked',true);
							}
						});
					});
					//鼠标移入二维码放大
					$('.pics').hover(function(){
						var pics = $(this).prop('src');
						$('.imgs').prop('src',pics);
						$('.suibian').show();
					},function(){
						$('.suibian').hide();
					});

				},error:function(data){
					console.log("请检查您的网络");
				}
			});
	});
	//点击分页加载事件
	$('#page').click(function(){
		var seachtext = $('#seachtext').val();
		var fenye = $('.layui-laypage-curr').find('em').eq(1).html();//获取当前点击的页数
		var geturl=url+ "/admin/userlist/devicelists?fenye="+fenye+"&seachtext="+seachtext;
		$("#btn1").prop("checked",false);
		$.ajax({
				type: 'get',
				async:false,
				dataType: "json",
				url: geturl,
				success: function (dete) {
					// console.log(dete);alert(dete);
					var count = dete.datas.length;
					var countdaili = dete.daili.length;
					var daili = '';
					var device = '';
					for (var k=0; k<count; k++) {
						device +='<tr>';
						device +='<td><input type="checkbox" name="checkbox" value="'+dete.datas[k]['device_id']+'"></td>';
						device +='<td>'+dete.datas[k]['device_id']+'</td>';
						device +='<td>'+dete.datas[k]['device_sn']+'</td>';
						device +='<td>'+dete.datas[k]['agent1']+'</td>';
						device +='<td>'+dete.datas[k]['agent2']+'</td>';
						device +='<td>'+dete.datas[k]['ProductKey']+'</td>';
						device +='<td>'+dete.datas[k]['DeviceSecret']+'</td>';
						device +='<td>';
						device +='<a href="javascript:void(0)">';
						device +='<img class="pics" width="50" height="50" src="'+dete.datas[k]['QRcode']+'" alt="" />';
						device +='</a>';
						device +='</td>';
						device +='<td>'+dete.datas[k]['addtime']+'</td>';
						device +='</tr>';
					}
					$('#devices').html(device);

						daili +='<select class="iconfont export_btn" id="agentone" onchange="updateagent()" style="height: 28px;">';
						daili +='<option value="0">&#xe621;一级代理</option>';
						for (var m=0; m<countdaili; m++) {
							daili +='<option value="'+dete.daili[m]['id']+'">'+dete.daili[m]['agent_name']+'</option>';
						}
						daili +='</select>';
						$('#dailis').html(daili);

						

						//鼠标移入二维码放大
						$('.pics').hover(function(){
							var pics = $(this).prop('src');
							$('.imgs').prop('src',pics);
							$('.suibian').show();
						},function(){
							$('.suibian').hide();
						});
				},error:function(dete){
					console.log("请检查您的网络");
				}
			});
	});

	//查一级级代理
	function updateagent(){
		var geturl=url+ "/admin/userlist/update_agents";
		var deviceArr = [];
		var agentone = $('#agentone').val();//一级代理
		//遍历选中的设备
		$("input[name='checkbox']:checkbox:checked").each(function(){ 
			deviceArr.push($(this).val());
		})
		// alert(agentone);
		if (deviceArr != '') {
			$.ajax({
				url:geturl,
				type: 'post',
				async:false,
				cache:false,
				dataType: "json",
				url: geturl,
				data:{"deviceArr":deviceArr,"agentone":agentone},
				success: function (arrs) {
					// console.log(arrs);
					if (arrs == 1) {
						alert('请选择正确的代理！');
					}else if (arrs == 2) {
						alert('设备中有其他一级代理！');
					}else{
						//二级代理
						var countdailis = arrs.length;
						var dai = '';
						dai +='<select class="iconfont export_btn" id="agenttwo" style="height: 28px;">';
						dai +='<option value="0">&#xe621;二级级代理</option>';
						for (var y=0; y<countdailis; y++) {
							dai +='<option value="'+arrs[y]['id']+'">'+arrs[y]['agent_name']+'</option>';
						}
						dai +='</select>';
						$('#erji_dailis').html(dai);

						//添加确定按钮
						var c='';
						c +='<button onclick="updateagent_two()" class="iconfont export_btn">&#xe621; 确定</button>';
						$('#queding').html(c);
					}

				},error:function(arrs){
					console.log("请检查您的网络");
				}
			});
		}else{
			alert('请选择设备');
		}
	}
	//点二级代理时修改设备属于哪些代理
	function updateagent_two(){
		var geturl=url+ "/admin/userlist/update_agenttwos";
		var deviceArrs = [];
		var agentone = $('#agentone').val();//一级代理
		var agenttwo = $('#agenttwo').val();//二级代理
		//遍历选中的设备
		$("input[name='checkbox']:checkbox:checked").each(function(){
			deviceArrs.push($(this).val());
		})
		$.ajax({
			url:geturl,
			type: 'post',
			async:false,
			cache:false,
			dataType: "json",
			url: geturl,
			data:{"deviceArrs":deviceArrs,"agentone":agentone,"agenttwo":agenttwo},
			success: function (twoarrs) {
				console.log(twoarrs);
				if (twoarrs == 1) {
					alert('修改成功');
					window.location.reload();
				}

			},error:function(twoarrs){
				console.log("请检查您的网络");
			}
		});
	}
	//点击下载二维码
	function downerweima(){
		var geturl=url+ "/admin/userlist/down_erweimas";
		$.ajax({
				type: 'get',
				async:false,
				dataType: "text",
				url: geturl,
				success: function (downs) {
					console.log(downs);
				},error:function(downs){
					console.log("请检查您的网络");
				}
			});
	}
	//搜索查询
	$('.seachbtn').click(function(){
		var seachtext = $('#seachtext').val();
		var geturl=url+ "/admin/userlist/devicelists?seachtext="+seachtext;
		$.ajax({
				type: 'get',
				async:false,
				dataType: "json",
				url: geturl,
				success: function (dete) {
					// console.log(dete);alert(dete);
					var count = dete.datas.length;
					var countdaili = dete.daili.length;
					var daili = '';
					var device = '';
					for (var k=0; k<count; k++) {
						device +='<tr>';
						device +='<td><input type="checkbox" name="checkbox" value="'+dete.datas[k]['device_id']+'"></td>';
						device +='<td>'+dete.datas[k]['device_id']+'</td>';
						device +='<td>'+dete.datas[k]['device_sn']+'</td>';
						device +='<td>'+dete.datas[k]['agent1']+'</td>';
						device +='<td>'+dete.datas[k]['agent2']+'</td>';
						device +='<td>'+dete.datas[k]['ProductKey']+'</td>';
						device +='<td>'+dete.datas[k]['DeviceSecret']+'</td>';
						device +='<td>';
						device +='<a href="javascript:void(0)">';
						device +='<img class="pics" width="50" height="50" src="'+dete.datas[k]['QRcode']+'" alt="" />';
						device +='</a>';
						device +='</td>';
						device +='<td>'+dete.datas[k]['addtime']+'</td>';
						device +='</tr>';
					}
					$('#devices').html(device);

						daili +='<select class="iconfont export_btn" id="agentone" onchange="updateagent()" style="height: 28px;">';
						daili +='<option value="0">&#xe621;一级代理</option>';
						for (var m=0; m<countdaili; m++) {
							daili +='<option value="'+dete.daili[m]['id']+'">'+dete.daili[m]['agent_name']+'</option>';
						}
						daili +='</select>';
						$('#dailis').html(daili);

						layui.use(['laypage', 'layer'], function(){
						var laypage = layui.laypage;
						  //自定义样式
						  laypage.render({
						    elem: 'page'
						    ,count:dete.count
						    ,limit: dete.limit
						    ,theme: '#35C4F9'
						  });
						});
						
						//鼠标移入二维码放大
						$('.pics').hover(function(){
							var pics = $(this).prop('src');
							$('.imgs').prop('src',pics);
							$('.suibian').show();
						},function(){
							$('.suibian').hide();
						});
				},error:function(dete){
					console.log("请检查您的网络");
				}
			});
	});
</script>
		

		
		
	</script>
	
</html>
